<script lang="ts" setup>
import type { DnsAddressPoolListItem } from '@/apis/model/dns'
import { getDnsAuthorityGtmAddressPoolApi } from '@/apis/modules/dns'
import { commonTableProps } from '@/utils/table'

interface IProps {
  record: DnsAddressPoolListItem
}
const props = defineProps<IProps>()
const emit = defineEmits(['reload'])
const visible = defineModel<boolean>('visible', { required: true })
// const formState = reactive({
//   nsAddress: '',
//   remark: '',
// })
const tableColumns = buildColumns([
  {
    title: '地址 IP',
    dataIndex: 'ip',
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
  },
])
const addressPoolInfo = ref()
const loading = ref(false)
async function getDetail() {
  loading.value = true
  await getDnsAuthorityGtmAddressPoolApi({
    id: props.record?.id,
  })
    .then((res) => {
      console.log('res', res)
      addressPoolInfo.value = res
    })
    .finally(() => (loading.value = false))
}

function handleBeforeOpen() {
  getDetail()
}
function handleClose() {}
</script>

<template>
  <a-drawer
    v-model:visible="visible"
    title="地址池详情"
    :width="480"
    :mask-closable="false"
    :footer="false"
    :before-close="handleClose"
    @before-open="handleBeforeOpen"
  >
    <div class="address-pool-drawer">
      <div class="header">
        <div class="header-title">
          {{ addressPoolInfo?.name || '-' }}
        </div>
        <div class="header-time">
          创建时间：
          {{ formatUnix(addressPoolInfo?.created_at) }}
        </div>
      </div>
    </div>
    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :loading="loading"
      :data="addressPoolInfo?.addresses || []"
    >
      <template #status="{ record }">
        {{ record?.status === 1 ? '在线' : '下线' }}
      </template>
    </a-table>
  </a-drawer>
</template>

<style lang="less" scoped>
.address-pool-drawer {
  .header {
    @apply h-20 rounded-2 mb-6 p-4;
    background: url('@/assets/images/address-pool-bg.png') no-repeat;
    background-size: cover;
    &-title {
      @apply text-base font-bold mb-2;
    }
    &-time {
      @apply text-xs text-[#86909C];
    }
  }
}
</style>
